<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的案例</title>
	</head>
	<body>
		<div id="app">
			<!--  1.push() 在数组末尾追加数据.
					2.pop() 删除数组最后一个元素
					3.shift() 删除数组第一个元素
					4.unshift() 在数据开头追加数据.
					5.splice() 在指定的位置替换数据.
					6.sort() 对数据进行排序 按照编码进行排序 由小到大
					7.reverse() 数组反转.
			-->
			<!-- 展现数组 -->
			<span v-for="item in array">{{item}}</span><br />
			<!-- 添加数据 -->
			数据:<input type="yext" v-model="num" /><br>
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="splice">splice</button>
			
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			
			const app = new Vue({ 
				el: "#app",
				data: {
					//定义数组
					array: [1,5,9,7,3,6],
					num: ''
				},
				//key:value 格式
				methods: {
					push(){
						this.array.push(this.num)-
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						
						//1.将第一位数据替换成5
						//this.array.splice(0,1,5)
						//2.将前2位数据换成8，9
						//this.array.splice(0,2,8,9)
						//3.删除第4位数据
						this.array.splice(3,1,'')
					}
				}
				
			})
		</script>
	</body>
</html>
